<template>
    <!-- 配置页面 -->
    <div class="config">
        <card-pane>
            <template v-slot:title>
                <span class="label">
                    <svg-icon
                        icon-class="font-layout-2-fill"
                        class="font-layout-2-fill"
                    />
                    <span class="text">基础设置</span>
                </span>
            </template>
            <template v-slot:list>
                <div class="list">
                    <base-form
                        :formItems="formItems"
                        :formConfig="formConfig"
                        :formData="formSubmit"
                        :formRules="formRule"
                        ref="searchForm"
                    >
                        <template v-slot:options="slotProps">
                            <div class="option-contener">
                                <el-form-item>
                                    <el-divider
                                        >{{ slotProps.childItem.label }}
                                    </el-divider>
                                </el-form-item>
                                <template
                                    v-if="
                                        slotProps.childItem.options &&
                                            slotProps.childItem.options.length >
                                                0
                                    "
                                >
                                    <el-form-item
                                        v-for="(childItem, index) in slotProps
                                            .childItem.options"
                                        :key="index"
                                    >
                                        <div class="col w-4">
                                            <el-tooltip
                                                class="item"
                                                effect="dark"
                                                content="label值"
                                                placement="top-start"
                                            >
                                                <el-input
                                                    placeholder="请输入label"
                                                    v-model="childItem.label"
                                                    clearable
                                                />
                                            </el-tooltip>
                                        </div>
                                        <div class="col w-3">
                                            <el-tooltip
                                                class="item"
                                                effect="dark"
                                                content="value值"
                                                placement="top-start"
                                            >
                                                <el-input
                                                    placeholder="请输入value"
                                                    v-model="childItem.value"
                                                    clearable
                                                />
                                            </el-tooltip>
                                        </div>
                                        <div class="col w-auto">
                                            <el-tooltip
                                                class="item"
                                                effect="dark"
                                                content="是否禁用"
                                                placement="top-start"
                                            >
                                                <el-switch
                                                    v-model="childItem.disabled"
                                                />
                                            </el-tooltip>
                                        </div>
                                        <div
                                            class="col w-auto"
                                            v-if="
                                                formSubmit.type !== 'single' &&
                                                    formSubmit.options &&
                                                    formSubmit.options.length >
                                                        1
                                            "
                                        >
                                            <el-tooltip
                                                class="item"
                                                effect="dark"
                                                content="删除"
                                                placement="top-start"
                                            >
                                                <el-button
                                                    type="danger"
                                                    icon="el-icon-delete"
                                                    circle
                                                    @click="
                                                        hanelRemoveOption(
                                                            childItem
                                                        )
                                                    "
                                                />
                                            </el-tooltip>
                                        </div>
                                    </el-form-item>
                                    <el-form-item
                                        v-if="formSubmit.type !== 'single'"
                                    >
                                        <el-button
                                            type="primary"
                                            @click="handelAddOption"
                                            >添加项</el-button
                                        >
                                    </el-form-item>
                                </template>
                            </div>
                        </template>
                    </base-form>
                </div>
            </template>
        </card-pane>
        <card-pane>
            <template v-slot:title>
                <span class="label">
                    <svg-icon
                        icon-class="font-layout-2-fill"
                        class="font-layout-2-fill"
                    />
                    <span class="text">规则项设置</span>
                </span>
            </template>
            <template v-slot:list>
                <div class="list">
                    <base-form
                        :formItems="ruleItems"
                        :formConfig="ruleConfig"
                        :formData="ruleSubmit"
                        ref="searchForm"
                    >
                        <template slot="customRule">
                            <el-form-item
                                class="menu-icon"
                                label="自定义规则项"
                            >
                                <el-button
                                    type="primary"
                                    @click="handelOpenCestomRule"
                                    >自定义编码</el-button
                                >
                            </el-form-item>
                        </template>
                    </base-form>
                </div>
            </template>
        </card-pane>
        <!-- 预览弹框 -->
        <el-dialog
            title="自定义规则项"
            :visible.sync="cestomRule"
            width="60%"
            v-dialogDrag
            append-to-body
            :close-on-click-modal="false"
            :close-on-press-escape="false"
        >
            <div class="edit-rule-contener">
                <monaco-editor
                    :editorOptions="editorOptions"
                    @onCodeChange="cesiumRuleEditChange"
                />
            </div>
            <!-- 新增 -->
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="handelCloseCestomRule"
                    >取 消</el-button
                >
                <el-button
                    size="small"
                    type="primary"
                    @click="handelConfirmCestomRule"
                    >确 认</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>
<script>
import BaseForm from '@/components/baseForm/index.vue'
import CardPane from '../../base/components/cardPane'
import MonacoEditor from '@/components/monacoEditor/index'
import { ruleOptions } from '../baseSetting/rules'
import { setFormItemProp } from '@/utils/tool'
export default {
    components: {
        BaseForm,
        CardPane,
        MonacoEditor
    },
    props: {
        curryCom: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    watch: {
        curryCom: {
            handler: async function(newVal) {
                if (
                    JSON.stringify(newVal) !== '{}' &&
                    JSON.stringify(newVal.value) !== '{}'
                ) {
                    await this.copyCol()
                    this.activeCol = newVal
                    this.generateFormItems(newVal)
                } else {
                    await this.copyCol()
                    return
                }
            },
            deep: true,
            immediate: true
        },
        ruleSubmit: {
            handler: function(newVal) {
                if (JSON.stringify(newVal) !== '{}') {
                    this.$bus.$emit('RulesChange')
                } else {
                    return
                }
            },
            deep: true
        }
    },
    data() {
        return {
            // 选中的列
            activeCol: {},
            // 配置表单的表单项列表
            formItems: [
                [
                    {
                        ltype: 'input',
                        placeholder: '请输入绑定的字段值',
                        label: '字段值',
                        prop: 'prop',
                        width: 'w-1',
                        clearable: true,
                        isShow: false,
                        question: '表单的key值，唯一名称'
                    }
                ],
                [
                    {
                        ltype: 'input',
                        placeholder: '请输入label文字',
                        label: 'label',
                        prop: 'label',
                        width: 'w-1',
                        clearable: true,
                        isShow: false
                    }
                ],
                [
                    {
                        ltype: 'input',
                        placeholder: '开启时的文字',
                        label: '开启时的文字',
                        prop: 'activeText',
                        width: 'w-1',
                        clearable: true,
                        isShow: false
                    }
                ],
                [
                    {
                        ltype: 'input',
                        placeholder: '关闭时的文字',
                        label: '关闭时的文字',
                        prop: 'inactiveText',
                        width: 'w-1',
                        clearable: true,
                        isShow: false
                    }
                ],
                [
                    {
                        ltype: 'input',
                        placeholder: '开启时的值',
                        label: '开启时的值',
                        prop: 'activeValue',
                        width: 'w-1',
                        clearable: true,
                        isShow: false
                    }
                ],
                [
                    {
                        ltype: 'input',
                        placeholder: '关闭时的值',
                        label: '关闭时的值',
                        prop: 'inactiveValue',
                        width: 'w-1',
                        clearable: true,
                        isShow: false
                    }
                ],
                [
                    {
                        ltype: 'colorPicker',
                        placeholder: '开启时的颜色',
                        label: '开启时的颜色',
                        prop: 'activeColor',
                        width: 'w-1',
                        clearable: true,
                        isShow: false
                    }
                ],
                [
                    {
                        ltype: 'colorPicker',
                        placeholder: '关闭时的颜色',
                        label: '关闭时的颜色',
                        prop: 'inactiveColor',
                        width: 'w-1',
                        clearable: true,
                        isShow: false
                    }
                ],
                [
                    {
                        ltype: 'select',
                        placeholder: '请设置复选样式',
                        label: '复选样式',
                        options: [
                            {
                                label: '默认',
                                value: 'default'
                            },
                            {
                                label: '按钮',
                                value: 'button'
                            }
                        ],
                        prop: 'style',
                        width: 'w-1',
                        clearable: true,
                        isShow: false
                    }
                ],
                [
                    {
                        ltype: 'select',
                        placeholder: '请选择控件宽度',
                        label: '宽度',
                        options: [
                            {
                                label: '自动',
                                value: 'w-auto'
                            },
                            {
                                label: '一份',
                                value: 'w-1'
                            },
                            {
                                label: '两份',
                                value: 'w-2'
                            },
                            {
                                label: '三份',
                                value: 'w-3'
                            },
                            {
                                label: '四份',
                                value: 'w-4'
                            },
                            {
                                label: '五份',
                                value: 'w-5'
                            },
                            {
                                label: '六份',
                                value: 'w-6'
                            },
                            {
                                label: '七份',
                                value: 'w-7'
                            },
                            {
                                label: '八份',
                                value: 'w-8'
                            },
                            {
                                label: '九份',
                                value: 'w-9'
                            }
                        ],
                        prop: 'width',
                        width: 'w-1',
                        clearable: true,
                        isShow: false
                    }
                ],
                [
                    {
                        ltype: 'select',
                        placeholder: '请设置显示的字段',
                        label: '显示字段',
                        options: [
                            {
                                label: 'label',
                                value: 'label'
                            },
                            {
                                label: 'value',
                                value: 'value'
                            }
                        ],
                        prop: 'labelKey',
                        width: 'w-1',
                        clearable: true,
                        isShow: false
                    }
                ],
                [
                    {
                        ltype: 'select',
                        placeholder: '请设置绑定的字段',
                        label: '绑定字段',
                        options: [
                            {
                                label: 'label',
                                value: 'label'
                            },
                            {
                                label: 'value',
                                value: 'value'
                            }
                        ],
                        prop: 'valueKey',
                        width: 'w-1',
                        clearable: true,
                        isShow: false
                    }
                ],
                [
                    {
                        ltype: 'switch',
                        label: '是否带边框',
                        prop: 'border',
                        isShow: false
                    }
                ],
                [
                    {
                        ltype: 'switch',
                        label: '禁用',
                        prop: 'disabled',
                        isShow: false
                    }
                ],
                [
                    {
                        ltype: 'inputNumber',
                        label: '最小可选个数',
                        prop: 'min',
                        width: 'w-1',
                        min: 0,
                        isShow: false
                    }
                ],
                [
                    {
                        ltype: 'inputNumber',
                        label: '最大可选个数',
                        prop: 'min',
                        width: 'w-1',
                        min: 0,
                        isShow: false
                    }
                ],
                [
                    {
                        ltype: 'custom',
                        slotName: 'options',
                        placeholder: '选择器选项',
                        label: '选择器选项',
                        prop: 'options',
                        width: 'w-1',
                        isShow: false,
                        prefixIcon: 'search',
                        options: []
                    }
                ]
            ],
            // 表单配置项
            formConfig: {
                labelPosition: 'left', // label对齐方式
                labelWidth: '100px',
                size: 'mini'
            },
            // 表单规则
            formRule: {
                prop: [
                    {
                        required: true,
                        message: '请输入唯一值',
                        trigger: 'blur'
                    }
                ]
            },
            // 表单提交项
            formSubmit: {},
            // 头部图标选择框是否显示
            prefixIconIconSelectVisible: false,
            // 尾部图标选择框是否显示
            suffixIconIconSelectVisible: false,
            // 规则表单项
            ruleItems: [
                [
                    {
                        ltype: 'switch',
                        label: '是否必填',
                        prop: 'required',
                        isShow: false
                    }
                ],
                [
                    {
                        ltype: 'input',
                        placeholder: '请输入必填校验提示',
                        label: '必填校验提示',
                        prop: 'message',
                        width: 'w-1',
                        clearable: true,
                        isShow: false
                    }
                ],
                [
                    {
                        ltype: 'select',
                        placeholder: '请选择其它校验',
                        label: '其它校验',
                        options: ruleOptions,
                        prop: 'validator',
                        width: 'w-1',
                        clearable: true,
                        isShow: false
                    }
                ],
                [
                    {
                        ltype: 'custom',
                        slotName: 'customRule',
                        placeholder: '自定义规则项',
                        label: '自定义规则项',
                        prop: 'customRule',
                        width: 'w-1',
                        isShow: false,
                        prefixIcon: 'search'
                    }
                ]
            ],
            // 规则表单配置项
            ruleConfig: {
                labelPosition: 'left', // label对齐方式
                labelWidth: '100px',
                size: 'mini'
            },
            // 规则表单提交项
            ruleSubmit: {
                required: false,
                message: '',
                validator: ''
            },
            // 自定义规则项
            cestomRule: false,
            cestomRuleValue: '',
            editorOptions: {
                value: `
					function fn(rule, value, callback){
						if (value) {
							var reg = /*请输入您要自定义的正则*/
							if (reg.test(value) === false) {
								callback(new Error('/*请输入验证不通过的提示*/'))
							} else {
								callback()
							}
						} else {
							callback()
						}
					}
				`,
                language: 'js'
            }
        }
    },
    methods: {
        copyCol() {
            return new Promise((resove, reject) => {
                try {
                    this.formItems.forEach(ele => {
                        if (ele.length > 0) {
                            ele.forEach(element => {
                                this.formItems = setFormItemProp(
                                    this.formItems,
                                    element.prop,
                                    'isShow',
                                    false
                                )
                            })
                        }
                    })
                    this.formSubmit = {}
                    this.activeCol = {}
                    resove(true)
                } catch (error) {
                    reject(error)
                }
            })
        },
        /**
         * 生成动态表单项
         */
        async generateFormItems(config) {
            if (config.value && JSON.stringify(config.value) !== '{}') {
                this.formSubmit = config.value
                this.formItems.forEach(element => {
                    element.forEach(ele => {
                        if (ele.prop === 'options') {
                            ele.options = this.formSubmit.options
                        }
                    })
                })
                for (const key in config.value) {
                    if (Object.hasOwnProperty.call(config.value, key)) {
                        this.formItems = setFormItemProp(
                            this.formItems,
                            key,
                            'isShow',
                            true
                        )
                    }
                }
            }
            if (config.rule && JSON.stringify(config.rule) !== '{}') {
                this.ruleSubmit = config.rule
                for (const key in config.value) {
                    if (Object.hasOwnProperty.call(config.value, key)) {
                        this.ruleItems = setFormItemProp(
                            this.ruleItems,
                            key,
                            'isShow',
                            true
                        )
                    }
                }
            }
        },
        /**
         * 打开规则自定义弹框
         */
        handelOpenCestomRule() {
            this.cestomRule = true
        },
        /**
         * 确认自定义的规则
         */
        handelConfirmCestomRule() {
            try {
                // 将代码编辑器中编辑的内容转换为可执行的代码
                const paramsAndBody = this.cestomRuleValue
                    .replace(
                        /function\s*\w*\s*\((.*?)\)\s*{([\s\S]*)}/,
                        '$1|$2'
                    )
                    .split('|')
                const params = paramsAndBody[0]
                const body = paramsAndBody[1]
                this.ruleSubmit.validator = new Function(params, body)
            } catch (error) {
                throw new Error(error)
            }
            this.cestomRule = false
        },
        /**
         * 取消自定义的规则
         */
        handelCloseCestomRule() {
            this.cestomRule = false
        },
        /**
         * 自定义规则项变化
         */
        cesiumRuleEditChange(val) {
            this.cestomRuleValue = val
        },
        /**
         * 移除选定项
         */
        hanelRemoveOption(childItem) {
            this.formSubmit.options = this.formSubmit.options.filter(
                item => item !== childItem
            )
            this.formSubmit.options.forEach((ele, index) => {
                ele.label = '选项' + Number(index)
                ele.value = index
                ele.disabled = false
            })
            this.formItems.forEach(element => {
                element.forEach(ele => {
                    if (ele.prop === 'options') {
                        ele.options = this.formSubmit.options
                        ele.options.forEach((ele, index) => {
                            ele.label = '选项' + Number(index)
                            ele.value = index
                            ele.disabled = false
                        })
                    }
                })
            })
        },
        /**
         * 添加项
         */
        handelAddOption() {
            this.formSubmit.options.push({
                label: '选项' + Number(this.formSubmit.options.length + 1),
                value: this.formSubmit.options.length + 1,
                disabled: false
            })
            this.formSubmit.options.forEach((ele, index) => {
                ele.label = '选项' + Number(index)
                ele.value = index
                ele.disabled = false
            })
            this.formItems.forEach(element => {
                element.forEach(ele => {
                    if (ele.prop === 'options') {
                        ele.options = this.formSubmit.options
                        ele.options.forEach((ele, index) => {
                            ele.label = '选项' + Number(index)
                            ele.value = index
                            ele.disabled = false
                        })
                    }
                })
            })
        }
    }
}
</script>
<style lang="scss">
.edit-rule-contener {
    @include box_flex(
        $width: 100%,
        $height: 60vh,
        $direction: column,
        $justify: flex-start,
        $align: flex-start
    );
}
</style>
<style lang="scss" scoped>
.config {
    @include box_flex(
        $width: 100%,
        $height: 100%,
        $direction: column,
        $justify: flex-start,
        $align: flex-start
    );

    overflow-y: auto;
    .list {
        padding: $margin-sm;
        .option-contener {
            @include box_flex(
                $width: 100%,
                $height: auto,
                $direction: column,
                $justify: flex-start,
                $align: flex-start
            );
            .option-label {
                font-size: 12px;
            }
        }
    }
}
</style>
